<template>
  <el-card>
    <!-- table主体 -->
    <el-table
      v-bind="$attrs"
      @cell-mouse-enter="handleCellEnter"
      @cell-mouse-leave="handleCellLeave"
      :data="tableData"
      style="width: 100%"
    >
      <el-table-column v-if="columnType" :type="columnType" width="55">
        <template v-if="columnType === 'expand'" #default="scope">
          <slot name="expand" :row="scope.row" :index="scope.$index" />
        </template>
      </el-table-column>
      <el-table-column
        v-for="column in columns"
        v-bind="column"
        :key="column.prop"
        :sortable="column.sortable"
      >
        <template v-if="column.slot" #default="scope">
          <slot
            :name="column.slotName"
            :row="scope.row"
            :index="scope.$index"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div v-if="pagination" class="pagination-wrapper">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :page-sizes="[10, 20, 50]"
        :total="paginationConfig.total"
        v-model:page-size="paginationData.pageSize"
        v-model:currentPage="paginationData.currentPage"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { reactive } from "vue";

const props = withDefaults(
  defineProps<{
    tableData: Array<any>;
    columns: Array<any>;
    pagination: boolean;
    paginationConfig: any;
    selection: boolean;
    columnType: string;
    // customConfig: any
  }>(),
  {
    tableData: () => [],
    columns: () => [],
    customConfig: {
      showPagination: true,
      paginationConfig: {
        total: 0,
        pageSize: 10,
        currentPage: 1,
      },
    },
    pagination: false,
    paginationConfig: {
      total: 0,
      currentPage: 1,
      pageSize: 10,
    },
    selection: false,
    columnType: "",
  },
);

const emits = defineEmits<{
  (e: "page-change", currentPage: number): void;
  (e: "size-change", pageSize: number): void;
}>();

const paginationData = reactive({
  currentPage: props.paginationConfig.currentPage,
  pageSize: props.paginationConfig.pageSize,
});

const handleCurrentChange = (currentPage: number) => {
  paginationData.currentPage = currentPage;
  emits("page-change", currentPage);
};

const handleSizeChange = (pageSize: number) => {
  paginationData.pageSize = pageSize;
  emits("size-change", pageSize);
};

const handleCellEnter = (row: any, column: any, cell: any, event: any) => {
  row.isEdit = true;
};

const handleCellLeave = (row: any, column: any, cell: any, event: any) => {
  row.isEdit = false;
};
</script>

<style lang="scss" scoped>
.pagination-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
</style>
